<template>
  <page-header-wrapper>
    <a-card title="请假信息">
      <a slot="extra" href="#">
        <!--操作按钮-->
        <task-button :bizId="leaveApply.applyId" :flowData="flowData"/>
      </a>
      <a-descriptions bordered size="default">
        <a-descriptions-item label="单据名称">
          {{ leaveApply.applyName }}
        </a-descriptions-item>
        <a-descriptions-item label="单据编号">
          {{ leaveApply.applyCode }}
        </a-descriptions-item>
        <a-descriptions-item label="开始时间">
          {{ leaveApply.leaveBegin }}
        </a-descriptions-item>
        <a-descriptions-item label="结束时间">
          {{ leaveApply.leaveEnd }}
        </a-descriptions-item>
        <a-descriptions-item label="请假天数">
          {{ leaveApply.leaveDay }}
        </a-descriptions-item>
        <a-descriptions-item label="审批状态">
          {{ statusFormat(leaveApply.workflowStatus) }}
        </a-descriptions-item>
        <a-descriptions-item label="请假原因" :span="3">
          {{ leaveApply.leaveReason }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <!--流程审批记录-->
    <history-task :bizId="leaveApply.applyId"/>
    <!--附件-->
    <file-list :bizId="leaveApply.applyId"/>
  </page-header-wrapper>
</template>
<script>
import { getLeave } from '@/api/demo/apply/leave'
import { mapGetters } from 'vuex'
import taskFlowImage from '@/components/flowable/task/taskFlowImage.vue'
import HistoryTask from '@/components/flowable/task/historyTask.vue'
import TaskButton from '@/components/flowable/task/taskButton.vue'
import FileList from '@/components/FileUpload/fileList.vue'

export default {
  name: 'LeaveView',
  components: {
    FileList,
    TaskButton,
    HistoryTask,
    taskFlowImage
  },
  props: {},
  data () {
    return {
      // 请假信息
      leaveApply: {},
      // 业务单据状态
      bizStatusOptions: [],
      // 任务处理人
      taskUserId: undefined,
      // 流程参数
      flowData: {
        service: 'oa',
        module: 'leave',
        route: '/leave-apply-view',
        show: false
      }
    }
  },
  watch: {
  },
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    // 获取详细信息
    getDetail (applyId) {
      getLeave(applyId).then(res => {
        if (res.code === 200) {
          this.leaveApply = res.data
          if (this.leaveApply.workflowStatus === 'draft' && this.leaveApply.createUserId === this.userId) {
              this.flowData.show = true
          }
          if (this.leaveApply.workflowStatus === 'in_process' && this.userId === this.taskUserId) {
            this.flowData.show = true
          }
        }
      })
    },
    // 字典翻译
    statusFormat (bizStatus) {
      return this.selectDictLabel(this.bizStatusOptions, bizStatus)
    }
  },
  created () {
    // 数据字典
    this.getDicts('biz_status').then(response => {
      this.bizStatusOptions = response.data
    })
    // 获取参数
    const applyId = this.$route.query && this.$route.query.id
    this.taskUserId = this.$route.query && this.$route.query.taskUserId
    // 获取详情
    this.getDetail(applyId)
  },
  mounted () {
  }
}
</script>,
